<template>
  <div class="defectOrder flowCloumn h100">
    <div class="header">
      <span class="el-icon-setting" style="font-size: 22px"></span
      ><span class="title">缺陷工单</span>
    </div>
    <div class="constentmain">
      <div class="tableContent">
        <listTableNew v-bind="tableSetting" ref="klTable"></listTableNew>
      </div>
      <div class="annotations list-table-main">
        注：
        <span class="circle normal-bg"></span>
        按期的工单
        <span class="circle remind-bg"></span>
        即将到期的工单
        <span class="circle warning-bg"></span>
        已超期的工单
        <span class="circle gray-bg"></span>
        已废弃工单
      </div>
    </div>
  </div>
</template>
<script>
import {
  getListApi, //列表
  deleteListApi, //删除
  adeprecateApi, //作废
} from "@/api/orderManagement/defectOrder";
export default {
  components: {},
  props: {
    //设备台账当前设备
    currentNode: {
      type: Object,
      default: () => {
        return {};
      },
    },
    menuType: {
      type: String,
      default: "",
    },
    showType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      pageType: "list",
      isFirstQuery: true,
      showDialog: false,
      invalidReason: "",
      inputReason: "",
      formData: {},
      urlQuery: null,
      currentDevice: {},
      tableSetting: {
        showCustomBtn: false,
        showFilterBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
            type: "",
          },
          searchArr: [],
        },
        actionList: [],
        column: [
          {
            label: "状态",
            prop: "status",
            scopeType: "formate",
            method: (row) => {
              let dom = "";
              let statusName =
                this.$store.getters["fineDirtDataName"](
                  "order_defect_status",
                  row.status
                ) || row.status;
              let colorStatus = row.trafficLight;
              if (row.status == "DEPRECATED") {
                dom =
                  '<span class="gray" title="废弃工单">' +
                  statusName +
                  "</span>";
              } else {
                if (colorStatus == "Normal") {
                  //正常
                  dom =
                    '<span class="normal" title="按期的工单">' +
                    statusName +
                    "</span>";
                } else if (colorStatus == "Warn") {
                  //即将到期
                  dom =
                    '<span class="remind" title="即将到期的工单">' +
                    statusName +
                    "</span>";
                } else if (colorStatus == "OverTime") {
                  //超期
                  dom =
                    '<span class="warning" title="已超期工单">' +
                    statusName +
                    "</span>";
                }
              }
              return dom;
            },
            sortable: "custom",
          },
          {
            label: "编号",
            prop: "code",
            sortable: "custom",
          },
          {
            label: "标题",
            prop: "title",
            showTooltip: true,
            sortable: "custom",
            width: "210px",
            // formatter: row => {
            //   let title =
            //     row.title ||
            //     this.$store.getters.userInfo.orgName +
            //       "-" +
            //       row.equipmentName +
            //       "-" +
            //       row.keys;
            //   return title;
            // }
          },
          {
            label: "所属类别",
            prop: "type",
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters["fineDirtDataName"](
                "order_defect_type",
                row.type
              );
            },
            width: "120px",
          },
          {
            label: "设备管理单位",
            id: "deptManage",
            prop: "deptManageName",
            sortable: "custom",
            width: "210px",
          },
          {
            label: "设备",
            prop: "equipmentName",
            sortable: "custom",
            showTooltip: true,
          },
          {
            label: "缺陷关键字",
            prop: "keys",
            sortable: "custom",
            showTooltip: true,
            width: "180px",
          },
          {
            label: "专业",
            prop: "major",
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters["fineDirtDataName"](
                "common_major",
                row.major
              );
            },
            width: "80px",
          },
          {
            label: "缺陷等级",
            prop: "level",
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters["fineDirtDataName"](
                "defect_order_level",
                row.level
              );
            },
            width: "110px",
          },
          {
            label: "应完成处理时间",
            prop: "expectEndTime",
            sortable: "custom",
            width: "160px",
          },
          {
            label: "当前节点",
            prop: "currNodeName",
            sortable: "custom",
            width: "170px",
          },
          {
            label: "当前处理人",
            prop: "currNodeUser",
            sortable: "custom",
            showTooltip: true,
            width: "120px",
          },
          {
            label: "发现人",
            prop: "finderName",
            sortable: "custom",
            width: "90px",
          },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: "custom",
            width: "140px",
          },
        ],
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (val) => {
            this.gotoDetails(val);
          },
        },
      },
      searchData: {},
    };
  },
  watch: {
    menuType(val) {
      this.init();
    },
    currentNode: {
      handler: function (newVal, oldVal) {
        this.currentDevice = Object.assign({}, newVal);
        let queryData = Object.assign(this.tableSetting.searchObj.queryData, {
          equipmentId: newVal.id,
          equipmentName: newVal.name,
        });
        this.tableSetting.searchObj.queryData = {};
        this.tableSetting.searchObj.queryData = queryData;
        setTimeout(() => {
          if (oldVal) {
            //不是第一次
            this.updateData();
          }
        }, 0);
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  created() {
    let queryData = this.$route.query;
    this.tableSetting.searchObj.queryData = Object.assign({}, queryData);
  },
  mounted() {
    this.updateData();
  },
  methods: {
    updateData() {
      this.$refs.klTable.searchData();
    },
    getTableData(params, sortStr) {
      let form = { ...params };
      if (sortStr) {
        form.orders = sortStr;
      }
      getListApi(form)
        .then((res) => {
          let data = res.data.list || [];
          let total = res.data.total || 0;
          this.$set(this.tableSetting, "tableData", data);
          this.$set(this.tableSetting, "totalNumber", total);
        })
        .catch((e) => {
          this.$set(this.tableSetting, "tableData", []);
          this.$set(this.tableSetting, "totalNumber", 0);
        });
    },
    //打开详情页
    gotoDetails(data) {
      let form = {
        id: data.id,
        status: data.status,
      };
      let { href } = this.$router.resolve({
        path: "/orderManagement/defectOrder/details",
        query: form,
      });
      window.open(href, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.defectOrder {
  width: 100%;
  background-color: white;
  border: 10px solid #eaf4ff;;
  .header {
    height: 58px;
    line-height: 58px;
    padding-left: 20px;
    display: flex;
    //justify-content: center;
    align-items: center;
    border-bottom: 10px solid #eaf4ff;
    .title {
      font-size: 18px;
      font-weight: 400;
    }
  }
  .constentmain {
    padding: 20px 20px 30px 20px;
    height: calc(100% - 58px);
    position: relative;
  }
  .tableContent {
    min-height: 500px;
    height: 100%;
  }
  .annotations {
    text-align: left;
    height: 20px;
    line-height: 20px;
    position: absolute;
    bottom: 20px;
  }
  .circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 10px;
  }
  .invalidReason {
    /deep/.el-dialog {
      width: 400px;
    }
    //
  }
}
</style>
